<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="../js/common.js"></script>
<script src="../js/jquery-1.11.1.js"></script>
<style type="text/css">
.box{
  height:200px;
  width:100%;
  background:#ccc;
  margin:10px 0;
}
.location{
  position:fixed;
  right:0;
  bottom:10px;
  width:20px;
  background:#FFC;
  padding:5px;
  cursor:pointer;
  color:#003
}
#thediv{
  width:100px;
  height:100px;
  background:green;  
	margin-top:200px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
  $('.scroll_a').click(function(){
    $('html,body').animate({scrollTop:$('#thediv').offset().top}, 800);
  });
});
</script>
</head>
<body style="height:1000px">
<div id="thediv"></div>
<div class="location">
  <p class="scroll_a">locate</p>
</div>
</body>
</html>